import { useTitle } from 'ahooks'
import style from './index.less'
import React, { useEffect, useState } from 'react'
import SRC from '@/images/supply/address.png'
import Buy from '@/images/supply/buy.png'
import Wu from '@/images/supply/wu.png'
import Tu from '@/images/supply/invoice.png'
import { Ellipsis } from 'antd-mobile'
import Item from './.item'
import { CountDown } from '@/components/count-down'
import { useSearchParams } from 'umi';
import { getPurchaserOrder } from '@/services/Publish'
import { dataDto } from '..'
import moment from 'moment'
import { codeToName } from '@/components/area-picker/provinceOptions'

export default () => {
    useTitle('订单详情')
    const [data, setData] = useState<dataDto>({} as dataDto);
    const [searchParams] = useSearchParams();
    const query = {
        id: String(searchParams.get('id'))
    }

    const getData = async () => {
        const res = await getPurchaserOrder(query.id)
        setData(res)
    }

    useEffect(() => {
        getData()
    }, [])
    return (
        <div className={style.page}>
            {data.negotiationState === 'SUPPLIER' || data.negotiationState === 'PURCHASER' ? (
                <div className={style.overlay}>
                    <div className={style.content}>
                        最终确认时间还剩
                        <span className={style.time}>
                            <CountDown countDown={data?.createTime} />
                        </span>
                    </div>
                </div>
            ) : null}

            {data.negotiationState === 'SUCCESS' || data.negotiationState === 'SUPPLIER' ? (
                <div className={style.address}>
                    <div className={style['address-title']}>
                        <img src={SRC} alt='alt' />
                        收货信息
                    </div>
                    <div className={style['address-bottom']}>
                        <div>
                            <span className={style.write}>{data?.purchaserName}</span>
                            {data?.purchaserPhone}
                        </div>
                        <div>
                            {codeToName(data?.areaCode)}
                            {data?.shippingAddress}
                        </div>
                    </div>
                </div>
            ) : null}

            <div className={style.po}>
                <div className={style['list-item']}>
                    <div>
                        <div className={style['con-tt']}>
                            <img src={Buy} alt='SRC' />
                            <span>四季化肥批发</span>
                            <span className={style.business}>企业客户</span>
                            {data.negotiationState === 'PURCHASER' ? (
                                <span>
                                    <span className={style['status-a']}>待买家确认</span>
                                    <span className={style.status}>待确认</span>
                                </span>
                            ) : null}
                        </div>
                        <div className={style.con}>
                            <div className={style['con-left']}>
                                {data?.imageUrl ? (
                                    <img src={data?.imageUrl} alt="商品图片" />
                                ) : <img src={Wu} alt='无' />}
                            </div>
                            <div className={style['con-right']}>
                                <div className={style.name}>
                                    <Ellipsis direction='end' content={data?.commodityName} rows={2} />

                                </div>
                                <div className={style.name}>
                                    <span className={style.type}>{data?.variety}</span>
                                    {data?.supportBilling ? (
                                        <span className={style.red}>
                                            <img src={Tu} alt='src' className={style.src} />
                                            不支持在线开票
                                        </span>
                                    ) : null}

                                </div>
                            </div>
                        </div>
                        <div className={style['box-top']}>
                            <div className={style['box-list']}>
                                <span className={style.names}>买家出价</span>
                                <span className={style.red}>{data?.expectedPrice}元/斤</span>
                            </div>
                            <div className={style['box-list']}>
                                <span className={style.names}>数量</span>
                                <span>×{data?.expectedAmount}</span>
                            </div>
                            <div className={style['box-list']}>
                                <span className={style.names}>合计金额</span>
                                <span className={style.money}>￥{Number(data?.totalMoney).toFixed(2)}</span>
                            </div>
                        </div>
                        <div className={style['box-bottom']}>
                            <div className={style['box-list']}>
                                <span className={style.names}>产地</span>
                                <span >{data?.originPlace}</span>
                            </div>
                            <div className={style['box-list']}>
                                <span className={style.names}>发货地</span>
                                <span>{data?.shipmentPlace}</span>
                            </div>
                            <div className={style['box-list']}>
                                <span className={style.names}>订单创建时间</span>
                                <span className={style.money}>{moment(data?.createTime).format('YYYY-MM-DD HH:mm')}</span>
                            </div>
                            {data.negotiationState === 'FAILED' ? (
                                <div className={style['box-list']}>
                                    <span className={style.names}>订单取消时间</span>
                                    <span className={style.money}>{moment(data?.updateTime).format('YYYY-MM-DD HH:mm')}</span>
                                </div>
                            ) : null}

                        </div>
                    </div>
                </div>

            </div>
            <div className={style.bottom}>
                <Item
                    data={{
                        id: data?.id,
                        supplierId: data.supplierId,
                        negotiationState: data.negotiationState,

                    }}
                />
            </div>
        </div>
    )
}
